<template>
	<view class="content">
		<!-- 基础用法 -->
		<view v-bind:key='index' v-for="(item,index) in errors"  >
		        <view class='cont'  @click="onClick(item)">
					<view class="lamTop" style="position:relative;width: 100%;">
						<image src="../../static/handle.png" class="img" v-if="item.status==0"></image>
						<image src="../../static/handling.png" class="img" v-if="item.status==1"></image>
						<image src="../../static/handled.png" class="img" v-if="item.status==2"></image>
						<view class="lamtopleft radius">
							<view v-if="item.type==1" class="radius">
							</image>{{item.deviceName}}-异常跳闸</view>
							<view v-if="item.type==2" class="radius">
							</image>{{item.deviceName}}-通讯断开</view>
						</view>
						<view class="lamtopright radius" v-if="item.status==0">未处理</view>
						<view class="lamtopright radius" v-if="item.status==1">处理中</view>
						<view class="lamtopright radius" v-if="item.status==2">已处理</view>
					</view>
					<view class="lamBottom">
							设备编号:{{item.deviceCode}}
					</view>
					<view class="lamBottom">
							开始日期:{{item.createTime}}
					</view>
					<view class="lamBottom">
							处理日期:{{item.dealTime}}
					</view>
					<view class="lamBottom">
							处理描述:{{item.remark}}
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		props:{
			errors:{
				type:Array,
				required:true
			}
		},
	  data(){
	    return {
	      options:[
	         {
	            text: '确认',
	            style: {
	                backgroundColor: '#dd524d'
	            },
	        }
	      ],
	    }
	  },
	  methods:{
	    onClick(item){
		 if(item.status==0||item.status==1){
			 uni.navigateTo({
			     url: '../updateStatus/updateStatus?id='+item.id+'&name='+item.deviceName+'&status='+item.status,
			 });
		 }else{
			 console.log("已处理状态不可修改处理描述!");
		  }
	    },
	    change(open){
	      console.log('当前开启状态：'+ open)
	    }
	  },
	  computed:{
		  
	  },
	  watch:{
		 
	  },
	}
</script>

<style lang="scss">
	.cont{
		border-top-width: 10rpx;
		border-bottom-width: 10rpx;
		border-left-width: 10rpx;
		border-right-width: 10rpx;
		border-style:solid;
		border-color:#efefef;
		background-color:#ebeaea;
		width: 100%;
	}
	.lamTop{
		display: flex;
	}
	.lamtopleft{
		width: 75%;
		margin-left: 20rpx;
	}
	.lamtopright{
		margin-top: 25rpx;
		width: 25%;
		margin-right: 50rpx;
		text-align:center;
	}
	.lamBottom{
		display: flex;
		text-align:center;
		font-size: 25rpx;
		color: darkgray;
		margin-left: 30rpx;
	}
	.lamBottomleft{
		width: 50%;
	}
	.lamBottomright{
		width: 50%;
	}
	.radius{
		border-style:solid;
		border-radius: 15rpx;
		border-color:#ebeaea;
	}
	.img{
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}
	
</style>
